<template>
  <div class="create-order-container">
    <div class="page-header">
      <h1>创建订单</h1>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/user/order/list' }">我的订单</el-breadcrumb-item>
        <el-breadcrumb-item>创建订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="order-form-container">
      <el-steps :active="activeStep" finish-status="success" align-center class="order-steps">
        <el-step title="选择服务"></el-step>
        <el-step title="填写详情"></el-step>
        <el-step title="确认订单"></el-step>
        <el-step title="完成创建"></el-step>
      </el-steps>
      
      <!-- 步骤1：选择服务 -->
      <div v-if="activeStep === 0" class="step-content">
        <div class="step-title">
          <h2>选择服务类型</h2>
          <p>请根据您的需求选择合适的洗衣服务</p>
        </div>
        
        <el-row :gutter="20" class="service-grid">
          <el-col v-for="service in services" :key="service.id" :xs="24" :sm="12" :md="8" :lg="6">
            <div 
              class="service-card" 
              :class="{ 'selected': selectedService && selectedService.id === service.id }"
              @click="selectService(service)">
              <div class="service-icon" :style="{backgroundImage: `url(${getServiceImageUrl(service.id)})`}"></div>
              <div class="service-info">
                <h3>{{ service.name }}</h3>
                <p>{{ service.description || '专业洗护服务' }}</p>
                <div class="service-price">¥{{ service.price }}</div>
              </div>
              <div class="select-mark" v-if="selectedService && selectedService.id === service.id">
                <i class="el-icon-check"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        
        <div class="step-actions">
          <el-button size="large" @click="$router.push('/user/order/list')">取消</el-button>
          <el-button 
            type="primary" 
            size="large" 
            @click="nextStep" 
            :disabled="!selectedService">下一步</el-button>
        </div>
      </div>
      
      <!-- 步骤2：填写订单详情 -->
      <div v-if="activeStep === 1" class="step-content">
        <div class="step-title">
          <h2>填写订单详情</h2>
          <p>请提供您的衣物信息和取件地址</p>
        </div>
        
        <el-form :model="orderForm" :rules="orderRules" ref="orderForm" label-width="100px" class="order-details-form">
          <el-form-item label="衣物类型" prop="clothesTypeId">
            <el-select v-model="orderForm.clothesTypeId" placeholder="请选择衣物类型" style="width: 100%">
              <el-option 
                v-for="type in clothesTypes" 
                :key="type.id" 
                :label="type.name" 
                :value="type.id">
                <span style="float: left">{{ type.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ type.description || '' }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="衣物数量" prop="quantity">
            <el-input-number 
              v-model="orderForm.quantity" 
              :min="1" 
              :max="100"
              @change="calculateTotal">
            </el-input-number>
          </el-form-item>
          
          <el-form-item label="取件地址" prop="pickupAddress">
            <el-select 
              v-model="selectedAddress" 
              placeholder="请选择取件地址" 
              filterable 
              @change="selectAddress"
              style="width: 100%">
              <el-option 
                v-for="address in addresses" 
                :key="address.id" 
                :label="address.fullAddress" 
                :value="address.id">
                <div class="address-option">
                  <div class="address-option-name">
                    {{ address.contactName }}
                    <span class="address-option-phone">{{ address.contactPhone }}</span>
                  </div>
                  <div class="address-option-detail">{{ address.fullAddress }}</div>
                  <el-tag size="mini" type="success" v-if="address.isDefault">默认</el-tag>
                  <el-tag size="mini" v-if="address.tag">{{ address.tag }}</el-tag>
                </div>
              </el-option>
            </el-select>
            <div class="address-actions">
              <el-button type="text" icon="el-icon-plus" @click="showAddAddressDialog">添加新地址</el-button>
            </div>
          </el-form-item>
          
          <el-form-item label="备注信息" prop="remark">
            <el-input 
              type="textarea" 
              v-model="orderForm.remark" 
              placeholder="请输入特殊洗护要求或其他备注信息" 
              rows="3">
            </el-input>
          </el-form-item>
        </el-form>
        
        <div class="step-actions">
          <el-button size="large" @click="prevStep">上一步</el-button>
          <el-button type="primary" size="large" @click="validateStep2">下一步</el-button>
        </div>
      </div>
      
      <!-- 步骤3：确认订单 -->
      <div v-if="activeStep === 2" class="step-content">
        <div class="step-title">
          <h2>确认订单信息</h2>
          <p>请核对订单信息，确认无误后提交</p>
        </div>
        
        <div class="order-summary">
          <el-card shadow="never" class="order-summary-card">
            <div slot="header" class="order-summary-header">
              <span>订单信息</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">服务类型:</span>
              <span class="summary-value">{{ selectedService ? selectedService.name : '' }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">衣物类型:</span>
              <span class="summary-value">{{ getClothesTypeName(orderForm.clothesTypeId) }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">衣物数量:</span>
              <span class="summary-value">{{ orderForm.quantity }} 件</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">取件地址:</span>
              <span class="summary-value">{{ orderForm.pickupAddress }}</span>
            </div>
            <div class="summary-item" v-if="orderForm.remark">
              <span class="summary-label">备注信息:</span>
              <span class="summary-value">{{ orderForm.remark }}</span>
            </div>
          </el-card>
          
          <el-card shadow="never" class="price-summary-card">
            <div slot="header" class="price-summary-header">
              <span>费用明细</span>
            </div>
            <div class="price-item">
              <span>服务基础费用</span>
              <span>¥{{ selectedService ? selectedService.price : 0 }}</span>
            </div>
            <div class="price-item">
              <span>衣物数量</span>
              <span>x {{ orderForm.quantity }}</span>
            </div>
            <div class="price-divider"></div>
            <div class="price-total">
              <span>订单总计</span>
              <span class="total-amount">¥{{ orderForm.totalAmount }}</span>
            </div>
          </el-card>
        </div>
        
        <div class="agreement-check">
          <el-checkbox v-model="agreeTerms">我已阅读并同意<a href="#" @click.prevent="showTerms">服务条款和隐私政策</a></el-checkbox>
        </div>
        
        <div class="step-actions">
          <el-button size="large" @click="prevStep">上一步</el-button>
          <el-button 
            type="primary" 
            size="large" 
            @click="submitOrder" 
            :loading="submitLoading"
            :disabled="!agreeTerms">
            提交订单
          </el-button>
        </div>
      </div>
      
      <!-- 步骤4：完成创建 -->
      <div v-if="activeStep === 3" class="step-content">
        <div class="success-container">
          <i class="el-icon-success success-icon"></i>
          <h2>订单创建成功！</h2>
          <p>您的订单已提交，我们将尽快安排取件</p>
          <div class="order-info">
            <div class="order-info-item">
              <span class="info-label">订单号:</span>
              <span class="info-value">{{ createdOrderNo }}</span>
            </div>
            <div class="order-info-item">
              <span class="info-label">总金额:</span>
              <span class="info-value price">¥{{ orderForm.totalAmount }}</span>
            </div>
          </div>
          
          <div class="success-actions">
            <el-button type="primary" @click="goToOrderDetail">订单详情</el-button>
            <el-button @click="goToOrderList">查看全部订单</el-button>
            <el-button type="success" @click="payNow">立即支付</el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加地址对话框 -->
    <el-dialog 
      title="添加新地址" 
      :visible.sync="addressDialogVisible"
      width="500px">
      <el-form :model="addressForm" :rules="addressRules" ref="addressForm" label-width="100px">
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="addressForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="contactPhone">
          <el-input v-model="addressForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="fullAddress">
          <el-input type="textarea" v-model="addressForm.fullAddress" rows="3"></el-input>
        </el-form-item>
        <el-form-item label="标签" prop="tag">
          <el-select v-model="addressForm.tag" placeholder="选择标签" style="width: 100%">
            <el-option label="家" value="家"></el-option>
            <el-option label="公司" value="公司"></el-option>
            <el-option label="学校" value="学校"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addressDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAddress" :loading="saveAddressLoading">保存</el-button>
      </span>
    </el-dialog>
    
    <!-- 条款和隐私政策对话框 -->
    <el-dialog
      title="服务条款和隐私政策"
      :visible.sync="termsDialogVisible"
      width="600px">
      <div class="terms-content">
        <h3>服务条款</h3>
        <p>请仔细阅读以下服务条款，使用我们的服务即表示您同意以下条款：</p>
        <ol>
          <li>本服务仅提供衣物洗护服务，不负责衣物的特殊保管责任。</li>
          <li>用户应确保提供的衣物适合洗涤，如有特殊要求请在备注中注明。</li>
          <li>对于衣物上未注明的瑕疵或损坏，我们不承担责任。</li>
          <li>取件和送件时间可能因实际情况有所调整，我们会尽量按照约定时间完成。</li>
          <li>服务过程中如对衣物造成损坏，我们将根据实际情况提供适当赔偿。</li>
        </ol>
        
        <h3>隐私政策</h3>
        <p>我们重视您的隐私保护，收集的个人信息仅用于提供更好的服务：</p>
        <ol>
          <li>我们收集您的姓名、联系方式和地址信息用于订单处理和配送。</li>
          <li>您的支付信息将通过安全渠道处理，我们不会存储您的支付卡详细信息。</li>
          <li>我们可能会向您发送服务通知和促销信息，您可以随时选择退订。</li>
          <li>我们不会将您的个人信息分享给任何无关的第三方。</li>
          <li>我们采取多种安全措施保护您的个人信息不被未授权访问或泄露。</li>
        </ol>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="termsDialogVisible = false">我已阅读并同意</el-button>
      </span>
    </el-dialog>
    
    <!-- 支付对话框 -->
    <el-dialog title="订单支付" :visible.sync="paymentDialogVisible" width="400px" center>
      <div class="payment-dialog">
        <div class="payment-amount">
          <div class="amount-label">支付金额</div>
          <div class="amount-value">¥{{ orderForm.totalAmount }}</div>
        </div>
        <div class="payment-methods">
          <div class="method-label">支付方式</div>
          <div class="method-options">
            <el-radio v-model="paymentMethod" label="alipay">
              <img src="https://via.placeholder.com/24x24?text=Alipay" alt="支付宝" class="payment-icon">
              支付宝
            </el-radio>
            <el-radio v-model="paymentMethod" label="wechat">
              <img src="https://via.placeholder.com/24x24?text=WeChat" alt="微信支付" class="payment-icon">
              微信支付
            </el-radio>
          </div>
        </div>
        <div class="payment-qrcode">
          <img :src="getPaymentQRCode()" alt="支付二维码" class="qrcode-image">
          <p>请使用{{ paymentMethod === 'alipay' ? '支付宝' : '微信' }}扫码支付</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPayment">确认支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'CreateOrder',
  data() {
    return {
      activeStep: 0,
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      services: [],
      clothesTypes: [],
      addresses: [],
      selectedService: null,
      selectedAddress: null,
      orderForm: {
        userId: '',
        serviceTypeId: '',
        clothesTypeId: '',
        quantity: 1,
        totalAmount: 0,
        pickupAddress: '',
        remark: ''
      },
      orderRules: {
        clothesTypeId: [{ required: true, message: '请选择衣物类型', trigger: 'change' }],
        quantity: [{ required: true, message: '请输入衣物数量', trigger: 'blur' }],
        pickupAddress: [{ required: true, message: '请选择取件地址', trigger: 'change' }]
      },
      agreeTerms: false,
      submitLoading: false,
      createdOrderNo: '',
      createdOrderId: '',
      
      // 地址对话框相关
      addressDialogVisible: false,
      addressForm: {
        userId: '',
        contactName: '',
        contactPhone: '',
        fullAddress: '',
        tag: '',
        isDefault: false
      },
      addressRules: {
        contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        contactPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        fullAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
      },
      saveAddressLoading: false,
      
      // 条款对话框
      termsDialogVisible: false,
      
      // 支付对话框
      paymentDialogVisible: false,
      paymentMethod: 'alipay'
    }
  },
  created() {
    this.fetchServiceTypes()
    this.fetchClothesTypes()
    this.fetchAddresses()
    
    // 检查是否从首页选择了服务
    const selectedServiceStr = localStorage.getItem('selectedService')
    if (selectedServiceStr) {
      try {
        this.selectedService = JSON.parse(selectedServiceStr)
        this.orderForm.serviceTypeId = this.selectedService.id
        this.calculateTotal()
      } catch (e) {
        console.error('解析已选服务失败', e)
      }
      // 清除存储的选中服务
      localStorage.removeItem('selectedService')
    }
    
    if (this.user.id) {
      this.orderForm.userId = this.user.id
      this.addressForm.userId = this.user.id
    }
  },
  methods: {
    async fetchServiceTypes() {
      try {
        const res = await axios.get('/api/service/list').then(res => res.data)
        if (res.code === 200) {
          this.services = res.data
        } else {
          this.$message.error(res.message || '获取服务类型失败')
        }
      } catch (error) {
        this.$message.error('获取服务类型失败')
      }
    },
    async fetchClothesTypes() {
      try {
        const res = await axios.get('/api/clothes/list').then(res => res.data)
        if (res.code === 200) {
          this.clothesTypes = res.data
        } else {
          this.$message.error(res.message || '获取衣物类型失败')
        }
      } catch (error) {
        this.$message.error('获取衣物类型失败')
      }
    },
    async fetchAddresses() {
      if (!this.user.id) return
      
      try {
        const res = await axios.get(`/api/address/list?userId=${this.user.id}`).then(res => res.data)
        if (res.code === 200) {
          this.addresses = res.data
          
          // 如果有默认地址，则自动选中
          const defaultAddress = this.addresses.find(addr => addr.isDefault)
          if (defaultAddress) {
            this.selectedAddress = defaultAddress.id
            this.selectAddress(defaultAddress.id)
          }
        } else {
          this.$message.error(res.message || '获取地址失败')
        }
      } catch (error) {
        this.$message.error('获取地址失败')
      }
    },
    selectService(service) {
      this.selectedService = service
      this.orderForm.serviceTypeId = service.id
      this.calculateTotal()
    },
    getServiceImageUrl(serviceId) {
      // 为不同ID的服务返回不同的默认图片
      const images = [
        'https://img.icons8.com/color/96/000000/washing-machine.png',
        'https://img.icons8.com/color/96/000000/iron.png',
        'https://img.icons8.com/color/96/000000/clothes-line.png',
        'https://img.icons8.com/color/96/000000/dry-clean.png'
      ]
      return images[serviceId % images.length]
    },
    selectAddress(addressId) {
      const address = this.addresses.find(addr => addr.id === addressId)
      if (address) {
        this.orderForm.pickupAddress = `${address.fullAddress} (${address.contactName}, ${address.contactPhone})`
      }
    },
    calculateTotal() {
      if (this.selectedService && this.orderForm.quantity) {
        this.orderForm.totalAmount = (this.selectedService.price * this.orderForm.quantity).toFixed(2)
      } else {
        this.orderForm.totalAmount = 0
      }
    },
    nextStep() {
      this.activeStep++
    },
    prevStep() {
      this.activeStep--
    },
    validateStep2() {
      this.$refs.orderForm.validate(valid => {
        if (valid) {
          this.nextStep()
        } else {
          this.$message.error('请完成所有必填项')
        }
      })
    },
    getClothesTypeName(id) {
      const clothType = this.clothesTypes.find(type => type.id === id)
      return clothType ? clothType.name : '未知'
    },
    showAddAddressDialog() {
      this.addressForm = {
        userId: this.user.id,
        contactName: '',
        contactPhone: '',
        fullAddress: '',
        tag: '',
        isDefault: false
      }
      this.addressDialogVisible = true
    },
    async saveAddress() {
      this.$refs.addressForm.validate(async valid => {
        if (!valid) return
        
        this.saveAddressLoading = true
        try {
          const res = await axios.post('/api/address/add', this.addressForm).then(res => res.data)
          if (res.code === 200) {
            this.$message.success('地址添加成功')
            this.addressDialogVisible = false
            await this.fetchAddresses()
            
            // 自动选中新添加的地址
            if (res.data && res.data.id) {
              this.selectedAddress = res.data.id
              this.selectAddress(res.data.id)
            }
          } else {
            this.$message.error(res.message || '添加地址失败')
          }
        } catch (error) {
          this.$message.error('添加地址失败')
        } finally {
          this.saveAddressLoading = false
        }
      })
    },
    showTerms() {
      this.termsDialogVisible = true
    },
    async submitOrder() {
      if (!this.agreeTerms) {
        this.$message.warning('请先阅读并同意服务条款和隐私政策')
        return
      }
      
      this.submitLoading = true
      try {
        const res = await axios.post('/api/order/create', this.orderForm).then(res => res.data)
        if (res.code === 200) {
          this.createdOrderNo = res.data.orderNo
          this.createdOrderId = res.data.id
          this.nextStep()
        } else {
          this.$message.error(res.message || '创建订单失败')
        }
      } catch (error) {
        this.$message.error('创建订单请求失败')
      } finally {
        this.submitLoading = false
      }
    },
    goToOrderDetail() {
      this.$router.push(`/user/order/detail/${this.createdOrderId}`)
    },
    goToOrderList() {
      this.$router.push('/user/order/list')
    },
    payNow() {
      this.paymentDialogVisible = true
    },
    getPaymentQRCode() {
      // 返回支付方式对应的二维码图片
      return this.paymentMethod === 'alipay' 
        ? 'https://example.com/alipay_qrcode.png' 
        : 'https://example.com/wechat_qrcode.png'
    },
    async confirmPayment() {
      try {
        const res = await axios.put(`/api/order/pay?orderNo=${this.createdOrderNo}&paymentMethod=${this.paymentMethod}`).then(res => res.data)
        
        if (res.code === 200) {
          this.$message.success('支付成功')
          this.paymentDialogVisible = false
          // 重定向到订单详情页
          this.goToOrderDetail()
        } else {
          this.$message.error(res.message || '支付失败')
        }
      } catch (error) {
        this.$message.error('支付操作失败')
      }
    }
  }
}
</script>

<style scoped>
.create-order-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2rem;
  color: #333;
  margin: 0 0 15px 0;
}

.order-form-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 30px;
  margin-bottom: 30px;
}

.order-steps {
  margin-bottom: 40px;
}

.step-content {
  margin-top: 20px;
}

.step-title {
  text-align: center;
  margin-bottom: 30px;
}

.step-title h2 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

.step-title p {
  color: #606266;
}

/* 服务选择卡片 */
.service-grid {
  margin-bottom: 40px;
}

.service-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-card.selected {
  border-color: #409EFF;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-icon {
  height: 120px;
  background-size: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f5f7fa;
}

.service-info {
  padding: 15px;
}

.service-info h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.service-info p {
  color: #606266;
  font-size: 0.9rem;
  margin-bottom: 10px;
  height: 40px;
  overflow: hidden;
}

.service-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #f56c6c;
}

.select-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-color: #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* 订单详情表单 */
.order-details-form {
  max-width: 600px;
  margin: 0 auto 40px;
}

.address-option {
  padding: 5px 0;
}

.address-option-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.address-option-phone {
  color: #909399;
  margin-left: 10px;
  font-weight: normal;
}

.address-option-detail {
  color: #606266;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.address-actions {
  margin-top: 5px;
  text-align: right;
}

/* 订单确认 */
.order-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.order-summary-card {
  flex: 3;
  min-width: 300px;
}

.price-summary-card {
  flex: 2;
  min-width: 250px;
}

.order-summary-header, .price-summary-header {
  font-weight: bold;
}

.summary-item {
  margin-bottom: 15px;
  display: flex;
}

.summary-label {
  width: 100px;
  color: #909399;
}

.summary-value {
  flex: 1;
}

.price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #606266;
}

.price-divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 15px 0;
}

.price-total {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.total-amount {
  color: #f56c6c;
  font-size: 1.2rem;
}

.agreement-check {
  text-align: center;
  margin-bottom: 30px;
}

.agreement-check a {
  color: #409EFF;
  text-decoration: none;
}

.agreement-check a:hover {
  text-decoration: underline;
}

/* 完成创建 */
.success-container {
  text-align: center;
  padding: 40px 20px;
}

.success-icon {
  font-size: 80px;
  color: #67c23a;
  margin-bottom: 20px;
}

.success-container h2 {
  font-size: 1.8rem;
  color: #303133;
  margin-bottom: 15px;
}

.success-container p {
  color: #606266;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

.order-info {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  max-width: 100%;
  margin: 0 auto 30px;
}

.order-info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.info-label {
  color: #909399;
}

.info-value {
  font-weight: bold;
}

.info-value.price {
  color: #f56c6c;
}

.success-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 步骤操作按钮 */
.step-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

/* 条款内容 */
.terms-content {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.terms-content h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  color: #303133;
}

.terms-content p {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.5;
}

.terms-content ol {
  padding-left: 20px;
  color: #606266;
  line-height: 1.6;
}

.terms-content li {
  margin-bottom: 10px;
}

/* 支付对话框样式 */
.payment-dialog {
  text-align: center;
}

.payment-amount {
  margin-bottom: 20px;
}

.amount-label {
  font-size: 1rem;
  color: #606266;
  margin-bottom: 10px;
}

.amount-value {
  font-size: 2rem;
  font-weight: bold;
  color: #f56c6c;
}

.payment-methods {
  margin-bottom: 20px;
}

.method-label {
  font-size: 1rem;
  color: #606266;
  margin-bottom: 10px;
  text-align: left;
}

.method-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payment-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}

.payment-qrcode {
  margin: 20px 0;
}

.qrcode-image {
  width: 180px;
  height: 180px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-form-container {
    padding: 20px 15px;
  }
  
  .order-summary {
    flex-direction: column;
  }
  
  .step-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .step-actions .el-button {
    width: 100%;
  }
  
  .success-actions {
    flex-direction: column;
  }
  
  .success-actions .el-button {
    width: 100%;
  }
  
  .order-info {
    width: 100%;
  }
}
</style> 